<template>
  <div
    class="audio-bar"
    :class="{ reverse: props.reverse }"
    :style="{ backgroundColor: bgColor, color: textColor }"
  >
    <img :src="icon" alt="" class="play-btn" @click.stop="togglePlay" />
    <div class="slider" :style="`width: ${barWidth}px`">
      <el-slider v-model="progress"   :show-tooltip="false" @input="changeSchedule"></el-slider>
    </div>
    <div class="state-time">{{ formatDuration(Number(duration)) }}</div>
  </div>
</template>

<script lang="ts" setup>
import { computed, toRefs, ref } from 'vue';
import playIcon from '@/assets/images/audio_bar_play.webp';
import pauseIcon from '@/assets/images/audio_bar_pause.webp';
import { formatDuration } from '@/utils/utils';

interface AudioBarProps {
  isPlaying: boolean; // 是否正在播放
  progress: number; // 当前播放进度
  duration: number | string; // 当前音频总时长
  reverse?: boolean; //布局反转
  textColor?: string; //文字颜色
  bgColor?: string; //背景颜色
}
const icon = computed(() => {
  return isPlaying.value ? pauseIcon : playIcon;
});

const props = defineProps<AudioBarProps>();

const emit = defineEmits(['toggle-play', 'change-progress']);

// const barList = computed(() => {
//   let barCount = props.duration < 20 ? 10 : props.duration > 40 ? 25 : 18;
//   let array = [];
//   for (let i = 0; i < barCount; i++) {
//     if (i <= barCount - 3 || i >= 2) {
//       // 生成6到18之间的随机数（包括6和18） 防止首位过高不美观
//       array.push(Math.floor(Math.random() * (18 - 6 + 1)) + 6);
//     } else {
//       // 生成6到24之间的随机数（包括6和24）
//       array.push(Math.floor(Math.random() * (24 - 6 + 1)) + 6);
//     }
//   }
//   return array;
// });

const barWidth = computed(() => {
  // 大于等于60秒固定200px
  let duration = Number(props.duration);
  if (duration >= 60) {
    return 200;
  }
  // 小于60秒按比例计算（60秒=200px的比例）
  else {
    const ratioWidth = duration * (200 / 60);
    // 确保最小80px，最大不超过200px
    return Math.max(Math.min(ratioWidth, 200), 80);
  }
});

let { isPlaying, progress } = toRefs(props);

//计算当前进度
const currentIndex = computed(() => {
  if (progress.value <= 0) return 0;
  if (progress.value >= 100) return 25;
  let index = progress.value / 4;
  let a = index < 1 ? 1 : Math.floor(index);
  console.log('>>>>>>>>>>>>>> 当前进度：', a);
  return a;
});
/**
 * 文字颜色
 */
const textColor = computed(() => {
  return props.textColor || '#333';
});

/**
 * 背景颜色
 */
const bgColor = computed(() => {
  return props.bgColor || 'transparent';
});

/**
 * 播放暂停
 */
function togglePlay() {
  emit('toggle-play', !props.isPlaying);
}

/**
 * 滑动slider进度
 */
function changeSchedule(progress: number) {
  emit('change-progress', progress);
}
</script>

<style scoped lang="scss">
.audio-bar {
  padding: 8px 20px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  // justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  // &.reverse {
  //   flex-direction: row-reverse;
  // }
  .play-btn {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .slider {
    margin-left: 18px;
    .el-slider {
      height: 32px;
      display: flex;
      align-items: center;
    }
    ::v-deep .el-slider__button-wrapper {
      display: flex;
      align-items: center;
      width: 32px !important;
      height: 32px !important;
    }
    ::v-deep .el-slider__button {
      border: none;
      margin-left: 16px;
    }
    ::v-deep .el-slider__runway {
      height: 2px !important;
    }
    ::v-deep .el-slider__bar {
      height: 2px !important;
    }
    ::v-deep .el-slider__button  {
      width: 16px !important;
      height: 16px !important;
    }
  }
  .state-time {
    margin-left: 18px;
    color: #666;
    font-size: 14px;
  }
  // .progress-bar {
  //   display: flex;
  //   align-items: center;
  //   margin: 0 12px;
  //   .vertiacal-bar {
  //     margin-left: 5px;
  //     width: 2px;
  //     border-radius: 5px;
  //     height: 18px;
  //     background-color: #c2d7ff;
  //     &.progress {
  //       background-color: #2b72fe;
  //     }
  //   }
  // }
}
</style>
